<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <!-- Latest compiled and minified CSS -->
    <include file="share:meta" />
    <link rel="stylesheet" type="text/css" href="../Public/js/plugin/select2/select2.min.css">
    <script type="text/javascript" src='../Public/js/plugin/select2/select2.full.min.js'></script>
    <script type="text/javascript">
    $(document).ready(function() {

    });
    </script>
    <style type="text/css">
    .tabspanel {
        background-color: #fff;
        padding-bottom: 10px;
        background-color: transparent;
    }
    
    .nav-tabs {
        border-bottom: 0px;
    }
    
    .nav-tabs li {
        width: 50%;
        background-color: transparent;
    }
    
    .nav-tabs li a {
        text-align: center;
        background-color: transparent;
        border-bottom: 1px solid #ddd;
        margin-right: 0px;
    }
    
    .nav-tabs li.active a {
        border-bottom: 1px solid #fff;
    }
    
    .tabspanel .tab-content {
        background-color: #fff;
        padding: 30px 10px 40px 10px;
        border: 1px solid #ddd;
        border-top: 0px;
    }
    </style>
</head>

<body class="reserve">
    <div id="common" class="container-fluid reserve">
        <include file="share:header" />
        <br>
        <br>
        <div role="tabpanel" class="tabspanel formstyle">
            <!-- Nav tabs -->
            <form action="/club/account/reserve_order" method="post" enctype="multipart/form-data">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">预约疗程项目</a>
                    </li>
                    <li role="presentation">
                        <a href="#tab" aria-controls="tab" role="tab" data-toggle="tab">预约其他项目</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="row ">
                            <div class="">
                                <div class="col-xs-1"></div>
                                <div class="col-xs-10">
                                    请点击选择疗程项目:
                                    <select name="ids[]" id="input" class="multiselect" multiple="">
                                        <volist name="plist" id="vo">
                                            <option value="{$vo.ProjectId}">{$vo.Name} &nbsp; {$vo.LeftCount}次</option>
                                        </volist>
                                    </select>
                                </div>
                                <div class="col-xs-1"></div>
                            </div>
                            <div class="clearfix">
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab" style="height:138px;">
                        <div class="row formstyle">
                            <div class="hang kuang">
                                <div class="col-xs-2"></div>
                                <div class="col-xs-2 line">分类</div>
                                <div class="col-xs-6 line">
                                    <select name="" id="KindNo" class="" style="" onChange="changekind();">
                                        <option value="">请选择</option>
                                        <volist name="cblist" id="vo">
                                            <option value="{$vo.ProjectKindNo}">{$vo.ProjectKindName}</option>
                                        </volist>
                                    </select>
                                </div>
                                <div class="col-xs-2"></div>
                            </div>
                            <div class="hang kuang">
                                <div class="col-xs-2"></div>
                                <div class="col-xs-2 line">项目</div>
                                <div class="col-xs-6 line">
                                    <select name="ids[]" id="ProjectSet" class="" style="">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                                <div class="col-xs-2"></div>
                            </div>
                            <script type="text/javascript">
                            function changekind() {
                                $('#ProjectSet').empty();
                                $('<option value="">加载中...</option>').appendTo('#ProjectSet');
                                $.ajax({
                                    type: "POST",
                                    url: "/club/account/reserve/No/" + $('#KindNo').val(),
                                    headers: {},
                                    data: "",
                                    dataType: "json", // html/json/jsonp/xml
                                    success: function(msg) {
                                        $('#ProjectSet').empty();

                                        for (var i = msg.length - 1; i >= 0; i--) {
                                            $('<option value="' + msg[i].ID + '">' + msg[i].ProjectName + '</option>').appendTo('#ProjectSet');
                                        }
                                        $('#ProjectSet').click();
                                        console.log(msg);
                                        console.log(msg.length);
                                    },
                                    error: function() {

                                    }
                                });
                            }
                            </script>
                            <br>
                            <br>
                        </div>
                    </div>
                </div>
                <div class="hang tijiao">
                    <div class="col-xs-2"></div>
                    <div class="col-xs-8">
                        <input type="submit" value="进 入 预 约" />
                    </div>
                    <div class="col-xs-2"></div>
                </div>
                <div class="hang tijiao">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-10">
                        <center><label class="desc">* 您可以同时预约疗程项目跟其他项目</label></center>
                    </div>
                    <div class="col-xs-1"></div>
                </div>
            </form>
        </div>
    </div>
    <include file="share:menu" />
</body>

</html>
